<template>
    <div>
        <!-- 按钮 -->
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
        </div>
        <!-- 表格 -->
        <div>
            <el-table :data="article" style="width: 100%">
                <el-table-column prop="title" label="标题" width="180"></el-table-column>
                <el-table-column prop="status" label="状态" width="180"></el-table-column>
                <el-table-column prop="readTimes" label="阅读次数" width="180"></el-table-column>
                <el-table-column prop="publishTime" label="发布时间">
                    <template slot-scope="scope">
                        {{scope.row.publishTime | fmtDate}}
                    </template>
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
        </div>
    </div>
</template>
<script>
import {del, get} from '@/utils/request'
export default {
    // 定义变量，在模板中直接用
    data(){
        return{
            article:[],
            visible:false
        }
    },
    // 定义事件处理函数、方法
    methods:{
        // 删除的处理函数
        deleteHandler(row){
            this.$confirm('此操作将永久删除该文章，是否继续？','提示' ,{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).then(()=>{
                let url="http://localhost:8888/article/deleteById"
                del(url,{id:row.id}).then(resp=>{
                //   1.提示 
                   this.$message({type:"success",message:resp.message});
                //    2.刷新
                   this.loadArticle();
                })
            })
        },
        // 修改的处理函数
        editHandler(row){
            this.$router.push({
                path:"/qhx/articleform",
                query:row
            })
        },
        // 跳转到编辑文章页面
        toFormHandler(){
            this.$router.push({path:"/qhx/articleform"})
        },
        // 查询文章
        loadArticle(){
            let url="http://localhost:8888/article/query";
            get(url).then(resp=>{
                this.article=resp.data;
            })
        }
    },
    // 生命周期钩子函数
    created(){
        this.loadArticle();
    }
    
}
</script>
// 样式css
<style lang="sass" scoped>

</style>